<template>
  <div>
    <el-form :model="dialogParams" ref="dialogParams" :inline="true" :rules="rules" label-width="140px">
      <el-form-item label="商户类型" prop="type" required>
        <el-input :value="'个人'" :disabled="true" style="width: 240px" clearable />
      </el-form-item>
      <el-form-item label="商户名称" prop="name">
        <el-input v-model="dialogParams.name" placeholder="请输入商户名称" style="width: 240px" clearable />
      </el-form-item>
      <el-form-item label="联系人" prop="userName">
        <el-input v-model="dialogParams.userName" placeholder="请输入联系人" style="width: 240px" clearable />
      </el-form-item>
      <el-form-item label="联系方式" prop="phone">
        <el-input v-model="dialogParams.phone" placeholder="请输入联系方式" style="width: 240px" clearable maxlength="11" />
      </el-form-item>
      <el-form-item label="邮箱" prop="email">
        <el-input v-model="dialogParams.email" placeholder="请输入邮箱" style="width: 240px" clearable />
      </el-form-item>
      <el-form-item label="账户名" prop="accountName">
        <el-input v-model="dialogParams.accountName" placeholder="请输入账户名" style="width: 240px" clearable />
      </el-form-item>
      <el-form-item label="账号" prop="account">
        <el-input v-model="dialogParams.account" placeholder="请输入账号" style="width: 240px" clearable />
      </el-form-item>
      <el-form-item label="开户行" prop="bank">
        <el-input v-model="dialogParams.bank" placeholder="请输入开户行" style="width: 240px" clearable />
      </el-form-item>
    </el-form>
    <div style="display: flex; justify-content: flex-end">
      <el-button @click="handleCancle">取 消</el-button>
      <el-button :loading="loading" type="primary" @click="handleConfirm">确 定</el-button>
    </div>
  </div>
</template>

<script>
import { addBusinessInfo, updateBusinessInfo } from '@/api/merchantManagement/business'
import { validMobile, validPhone, validEmails, validCreditCodeRule } from '@/utils/validate'
export default {
  name: "merchant",
  components: {
  },
  props: {
    params: {
      type: Object,
      default: {}
    }
  },
  data() {
    return {
      loading: false,
      dialogParams: {
        type: 2,
      },
      rules: {
        name: [{ required: true, message: "请输入商户名称", trigger: "blur" }],
        accountName: [
          { required: false, message: "请输入账户名", trigger: "blur" },
        ],
        account: [{ required: false, message: "请输入账号", trigger: "blur" }],
        bank: [{ required: false, message: "请输入开户行", trigger: "blur" }],
        phone: [
          {
            required: false,
            message: "请输入联系方式",
            trigger: "blur",
          },
          // { validator: validPhone, trigger: "blur" },
        ],

      },
    };
  },
  methods: {
    handleConfirm() {
      this.$refs['dialogParams'].validate((valid) => {
        if (valid) {
          if (this.dialogParams.phone && !validMobile(this.dialogParams.phone)) {
            this.$message({
              message: '联系方式格式不正确',
              type: 'warning'
            });
            return
          }
          if (this.dialogParams.email && !validEmails(this.dialogParams.email)) {
            this.$message({
              message: '邮箱格式不正确',
              type: 'warning'
            });
            return
          }
          this.loading = true;
          if (this.dialogParams.id) {
            updateBusinessInfo(this.dialogParams).then(res => {
              this.$message({
                message: '操作成功',
                type: 'success'
              });
              this.handleCancle()
              this.loading = false
            }).catch(f => {
              this.loading = false
            })
          } else {
            addBusinessInfo(this.dialogParams).then(res => {
              this.$message({
                message: '操作成功',
                type: 'success'
              });
              this.handleCancle()
              this.loading = false
            }).catch(f => {
              this.loading = false
            })
          }

        }
      })
    },
    handleCancle() {
      this.$emit("changeVisible", false);
    },
    isValue() {
      this.dialogParams = this.params
      // console.log(this.dialogParams);
    },
    initDialog() {
      this.dialogParams = {
        type: 2,
      }
    }
  },
};
</script>

<style lang="less" scoped></style>
